<template>

  <section class="course-list-section" id="echartsT" ref="echartsT">

  </section>
  <section class="course-list-section" id="echartsS" ref="echartsS">

  </section>

</template>
<script setup lang="ts">
import * as echarts from "echarts"
import {nextTick, ref} from "vue";

nextTick(()=>{
  initChart()
})
function initChart(){
  const echartsT:HTMLElement|null=document.getElementById("echartsT")
  if (echartsT){
    const chart = echarts.init(echartsT)
    chart.setOption({
      title: {
        text: '讲师教学统计'
      },
      tooltip: {},
      xAxis: {
        data: ['2021-12', '2022-01','2022-02', '2022-03','2022-04', '2022-05','2022-06', '2022-07','2022-08', '2022-09','2022-10', '2022-11', '2022-12', '2023-01','2023-02', '2023-03']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [189,90,180,90,180,90,20,10,40,20,5, 20, 136, 10, 10, 20]
        }
      ]
    });
  }
  const echartsS:HTMLElement|null=document.getElementById("echartsS")
  if (echartsS){
    const charts = echarts.init(echartsS)
    charts.setOption({
      title: {
        text: '学生听课统计'
      },
      tooltip: {},
      xAxis: {
        data: ['2021-12', '2022-01','2022-02', '2022-03','2022-04', '2022-05','2022-06', '2022-07','2022-08', '2022-09','2022-10', '2022-11', '2022-12', '2023-01','2023-02', '2023-03']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [180,90,180,90,180,90,20,10,40,20,5, 20, 136, 10, 10, 20]
        }
      ]
    });
  }
}

</script>
<style scoped lang="less">
.course-list-section {
  width: 100%;
  height: 500px;
  position: relative;
  background: #fff;
  padding: 15px;
}

.container {
  width: 1160px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-line {
  position: relative;
  padding: 50px 0;
  text-align: center;

  h5 {
    position: relative;
    margin-bottom: 20px;
    font-size: 32px;
    z-index: 1;
    color: #333;
  }
}

.line {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e1e1e1;
  margin-top: -1px;
  z-index: -1;
}

.subtitle {
  font-size: 16px;
  color: #999;
}

.more-course-button {
  margin-right: auto;
  margin-left: auto;
  margin-top: 30px;
  float: right;
}

.teacher-container{
  /deep/ .ant-card-body{
    padding: 0;
  }
  .teacher-item{
    text-align: center;
    .teacher-top{
      position: relative;
      z-index: 1;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background-color: #f5f8fa;
      padding: 20px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .avatar-lg{
        width: 60%;
        height: 60%;
        border-radius: 50%;
        border: 4px solid #fff;
      }
      .title{
        color: #333333;
      }
      .subtitle{
        color: #c1c1c1;
        font-size: 14px;
      }
    }
    .teacher-bottom{
      position: relative;
      height: 90px;
      line-height: 25px;
      box-sizing: border-box;
      padding: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
